<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Real Estate Builders Free Responsive Website Templates - icon">
	<meta name="author" content="webThemez.com">
	<title>欢迎来到拴马桩</title>
	<link rel="favicon" href="assets/images/favicon.png">
	<link rel="stylesheet" media="screen" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/css/font-awesome.min.css">
	<link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen">
	<link rel="stylesheet" type="text/css" href="assets/css/isotope.css" media="screen" />
	<link rel="stylesheet" href="assets/js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="assets/css/style.css">
	<script src="assets/js/html5shiv.js"></script>
	<script src="assets/js/respond.min.js"></script>
	<link rel="shortcut icon" href="Imperial/assets/img/logo.php">
	<link href="assets/css/detail.css" rel="stylesheet">
	<link href="assets/css/personalDetail.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script th:src="@{/webjars/jquery/3.6.0/dist/jquery.js}"></script>
	<link rel="stylesheet" type="text/css" href="assets/css/ShoppingCart.css"/>
	<link rel="stylesheet" th:href="@{/webjars/layui/2.5.7/css/layui.css}">
	<script th:src="@{/webjars/layui/2.5.7/layui.js}"></script>
</head>

<body>
<!-- Fixed navbar -->
<div th:replace="~{commons/commons::topbar(active='contact')}"></div>
<!-- /.navbar -->

<header id="head" class="secondary">
	<div class="container">
		<div class="row">
			<div class="col-sm-8">
				<h1>Our Projects</h1>
			</div>
		</div>
	</div>
</header>
<br>
<br>
<div th:replace="~{commons/commons::menunav(selected='myloan')}"></div>
<div id="app" style="height: 600px">
<div class="container" >
	<table class="tab" width="100%" border="0" cellspacing="0" cellpadding="0">
		<thead>
		<tr>
			<th>姓名</th>
			<th>贷款公司</th>
			<th>贷款金额</th>
			<th>利息</th>
			<th>贷款时间</th>
			<th>操作</th>
		</tr>
		</thead>
		<tbody>
		<tr v-for="item in productList">
			<td>
					<p>{{item.name}}</p>
			</td>
			<td>{{item.company}}</td>
			<td class="num">{{item.money}}</td>
			<td class="num">
				{{item.interest}}
			</td>
			<td>{{item.date}}</td>
			<td>
				<button class="layui-btn layui-btn-warm" @click="del(item);">还款</button>
			</td>
		</tr>
		</tbody>
	</table>
</div>
</div>
<footer id="footer">

	<div class="footer2">
		<div class="container">
			<div class="row">

				<div class="col-md-6 panel">
					<div class="panel-body">
						<p class="simplenav">
<!--							<a href="index.html">Home</a> |-->
<!--							<a href="about.html">About</a> |-->
<!--							<a href="services.html">Services</a> |-->
<!--							<a href="price.html">Price</a> |-->
<!--							<a href="projects.html">Projects</a> |-->
<!--							<a href="contact.html">Contact</a>-->
						</p>
					</div>
				</div>

				<div class="col-md-6 panel" >
					<div class="panel-body">
						<p class="text-right">
							Copyright &copy; 2021. Template by Shuanmazhuang
						</p>
					</div>
				</div>

			</div>
			<!-- /row of panels -->
		</div>
	</div>
</footer>
</body>
</html>
<script>
	let vm=new Vue({
		el:'#app',
		data:{
			totalMoney:0,
			productList:[],
			checkAllFlag:false
		},
		created:function(){
			this.cartView();
		},
		methods:{
			cartView:function () {
				let _this=this;
				$.ajax({
					url:'/getMyLoan',
					method: "post",
					success:function (res) {
						_this.productList=res;
					}
				})
			},

			del(item){
				var person=prompt("请输入你要还款的金额");
				if(person<=0||person>(item.money+item.interest)){
					layui.use('layer',function (){
						layer.msg("还款失败");
					})
				}else{
					$.ajax({
						url:'/repayment',
						method: "post",
						data: {
							"money":person,
							"id": item.id
						},
						success:function (res) {
							layui.use('layer',function (){
								layer.msg("还款成功");
							})
						}
					})
				}
			}

		}
	})
</script>
